
<template>
    <div>
      <el-tooltip
        v-bind="props.toolTipOptions"
        :popper-class="
          !toolTipShow ? 'hide-tooltip tooltip-popper' : 'tooltip-popper'
        "
      >
        <template #content>
          <div class="tooltip-content" :style="{ maxWidth: props.maxWidth||maxPopWidth + 'px' }">
            {{ props.content }}
          </div>
        </template>
        <div
          :class="{ 'text-auto-wrap': ifWrap, 'text-auto-nowrap': !ifWrap }"
          ref="textAutoRef"
          :style="{
            '-webkit-line-clamp': props.lineClamp,
            'line-clamp': props.lineClamp,
            ...props.outStyle
          }"
        >
          {{ props.content }}
        </div>
      </el-tooltip>
    </div>
  </template>
  
  <script setup>
    import { onMounted, defineProps, ref, computed } from 'vue';
  
    const props = defineProps({
      /* white-space: nowrap; */
      /* display: -webkit-box; */
      /* wrap和样式不可通用，可能出现省略号不显示情况 */
      toolTipOptions: {
        type: Object,
        default: () => ({
          content: 'Bottom center',
          placement: 'bottom',
          effect: 'dark',
          trigger: 'hover',
        }),
      },
      outStyle: {
        type: Object,
        default: () => ({
          fontSize: '14px',
        }),
      },
      content: {
        type: String,
        default:
          '',
      },
      lineClamp: {
        type: Number,
        default: 1,
      },
      maxWidth: {
        type: Number,
        default: 0,
      },
    // ...
    });
  
    const textAutoRef = ref(null);
  
    const toolTipShow = ref(false);
  
    const showText = ref(
      ' test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测test这是一段测试文字test这是一段测试文字test这是一段测'
    );
  
    const maxPopWidth = computed(() => {
      if (textAutoRef.value) {
        return textAutoRef.value.clientWidth * 0.5;
      } else {
        return '100%';
      }
    });
  
    const ifWrap = computed(() => {
      if (props.lineClamp > 1) {
        return true;
      } else {
        return false;
      }
    });
  
    onMounted(() => {

      if (
        !ifWrap.value && (textAutoRef.value.scrollWidth > textAutoRef.value.clientWidth)
  
      ) {
        toolTipShow.value = true;
      } else if (
        ifWrap.value && (textAutoRef.value.scrollHeight > textAutoRef.value.clientHeight)
      ) {
        toolTipShow.value = true;
      }
    });
  </script>
  
  <style lang="less" scoped>
  .text-auto-nowrap {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    // display: -webkit-box;
    // -webkit-line-clamp: v-bind(lineClamp);
    // -webkit-box-orient: vertical;
  }
  .text-auto-wrap {
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  </style>
  <style>
  .hide-tooltip {
    visibility: hidden !important;
  }
  </style>
  